<template>
   <!-- 订单列表 -->
    <div id="orderList">
        <van-card
        v-for="(item,index) in this.$store.state.listData" :key="item.id"
        :num="item.num"
        :price="item.price"
        :desc="item.param"
        :title="item.title"
        :thumb="`../../../../static/images/shoppingCart/shop-${item.imgUrl}.png`"
        />
        <!-- 总计 -->
        <div class="orderList-total">
        总计：<span>￥{{$store.getters.initTotal}}</span>
        </div>
    </div>

</template>

<script>
// 请求购物车列表数据
import {myGetshop} from '@/request/shoppingCartApi'
export default {
    mounted() { 
        // 请求购物车列表数据
        myGetshop().then(
            res=>{
                this.img = res.shopList.imgUrl
                this.$store.commit("listData",res.shopList)
            }
        )
    },
}
</script>

<style lang="less" scoped>
#orderList{
    background-color: #ffffff;
}

.van-card:nth-of-type(1){
    margin-top: 20px;
}

.van-card{
    margin-top: 0px;
    background-color: #fff;
    height: 183px;
    width: 100%;
    .van-card__header{
        margin-top: 9px;
        margin-left: -7px;
        height: 158px;
        position: relative;
    }
    .van-card__content{
        min-height: 0;
    }
    .van-card__thumb{
        width: 158px;
        height: 158px;
        border: dotted 2px #000000;
    }
    .van-card__title{
        width: 373px;
        font-size: 28px;
    }
    .van-card__desc{
        font-size: 24px;
        color: #9b9b9b;
    }
    .van-card__price{
        position: absolute;
        top: 41px;
        right: 0px;
        span{
            font-size: 28px;
        }
    }
    .van-card__num{
        margin-top: -50px;
        font-size: 28px;
        color: #000000;
    }
}
.orderList-total{
    padding-top: 45px;
    background-color: #fff;
    text-align: right;
    padding-right: 35px;
    font-size: 28px;
    span{
        color: red;
    }
}
</style>